<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link href="../phoneCss/commons.css" rel="stylesheet" />
    <link href="../phoneCss/goods.css" rel="stylesheet" />
    <link href="../phoneCss/confirmOrder.css" rel="stylesheet" />
    <style>
        body, .mui-content{
            background: #fff;
        }
        .mui-content {

        }
        .dilever_way{
            border-top:12px solid #f2f2f2;
            margin: 0;
            border-bottom:12px solid #f2f2f2;
            height: 64px;
            line-height: 40px;
            color: #999;
            font-size: 14px;
        }
        .dilever_way .code{
            font-size: 14px;
            color: #333;
        }
        .dilever_way .copy{
            height: 25px;
            line-height: 25px;
            font-size: 12px;
            padding: 0 13px;
            color: #232326;
            border:1px solid #999;
            margin-top: 8px;
            border-radius: 2px;
            float: right;
            margin-right: 10px;
        }
        .state_box{
            width: 100%;
            height: 75px;
            background-image: -moz-linear-gradient( 86deg, rgb(234,117,145) 0%, rgb(255,97,98) 100%);
            background-image: -webkit-linear-gradient( 86deg, rgb(234,117,145) 0%, rgb(255,97,98) 100%);
            background-image: -ms-linear-gradient( 86deg, rgb(234,117,145) 0%, rgb(255,97,98) 100%);
            color: #fff;
        }
        .state_box .state,.state_time{
            float: left;
        }
        .state_box .state{
            width: 19%;
            font-size: 17px;
            line-height: 75px;
            margin-left: 7%;
            margin-right: 15%;
        }
        .state_time{
            width: 50%;
            font-size: 14px;
            padding-top: 20px;
        }
        .addressBox{
            border-bottom: 10px solid #f2f2f2;
            padding-bottom: 16px;
        }
        .goodsBox .goods .addServiceBox{
            border-bottom: 2px solid #f2f2f2;
            padding-left: 7%;
        }
        .pay_way{
            width: 100%;
            padding-top: 20px;
        }
        .pay_way p{
            padding-left: 25px;
            color: #2a2a2a;
            font-size:14px;
            line-height: 14px;
            margin-bottom: 12px;
        }
        .pay_way p span{
            color: #7d7d7d;
            border: 1px solid #dfdfdf;
            height: 15px;
            line-height: 15px;
            font-size: 13px;
            padding: 1px 12px;
            margin-left: 34px;
        }
        .pay_way p:nth-child(2n){
            border-bottom: 1px solid #f2f2f2;
            padding-bottom: 10px;
        }
        .pay_way p:last-child{
            padding-bottom: 8px;
            border-bottom: 3.5px solid #f2f2f2;
        }
        .handle_box{
            width: 100%;
        }
        .handle_box div{
            margin-right: 10px;
            height: 30px;
            line-height: 30px;
            border-radius: 3px;
            width: 75px;
            text-align: center;
            float: right;
            font-size: 13px;
        }
        .handle_box .gray_handle{
            border:1px solid #999;
            color: #333;
            line-height: 28px;
        }
        .handle_box .blue_handle{
            background: #e04d45;
            color: #fff;
        }
        .goods .goods-img-box{
            width: 24%;
            border: 1px solid #ebebeb;
            margin-top: 12px;
        }
        .goods .goods-product-box .price{
            color: #232325;
        }
        .goods .goods-product-box .price i{
            float: none;
            margin-left: 7px;
            font-size: 12px;
        }
        .operation_box{
            float: right;
        }
        .operation_box a{
            padding: 1px 12px;
            height: 16px;
            line-height: 12px;
            float: left;
            font-size: 10px;
            border: 1px solid #bababa;
            color: #242426;
        }
        .mui-bar .mui-icon{
            color: #333;
            font-size: 24px;
            background: transparent;
            margin: 0;
        }
        .mui-bar-nav.mui-bar .mui-icon{
            margin-left: 0;
        }
        .goods .goods-product-box p{
            height: 42px;
        }
        .goods .goods-img-box img{
            width: 90%;
            margin: 0 auto;
            display: block;
            padding-top: 5%;
            padding-bottom: 5%;
        }
        .goodsBox .goods .addServiceBox .addService img{
            width: 14px;
            margin-right: 3px;
        }
        p {
            text-indent: 0;
        }
        .addressBox .address_icon img{
            width: 13px;
            height: 15px;
            margin-right: 15px;
            margin-left: 15px;
        }
        .addressBox .address_icon{
            width: auto;
        }
    </style>
</head>
<body>
<!--
    作者：lwy
    时间：2017-09-20
    描述：提交订单
-->
<header class="mui-bar mui-bar-nav" style="background: #fff">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">订单详情</h1>
</header>
<div class="mui-scroll-wrapper" style="padding-top: 44px;">
    <div class="mui-scroll">
<div class="mui-content">
    <!--订单状态盒子-->
    <div class="state_box">
        <div class="state"></div>
        <div class="state_time"></div>
    </div>
    <!--配送方式开始-->
    <div class="dilever_way">
        <span></span>
        <span class="code"></span>
        <span class="copy">复制</span>
    </div>
    <!--地址盒子开始-->
    <div class="addressBox mui-clearfix">
        <div class="address_icon"><img src="../phoneImg/address.png" alt="地址"></div>
        <div class="address_info">
            <div class="user_info">收货人<span class="name">名字</span><span class="phone"></span></div>
            <div class="address_detail"></div>
        </div>
        <!--<div class="address_more"><img src="../img/order-more.png" alt="更多"></div>-->
    </div>

    <div class="goodsBox">
        <!--<div class="goods">-->
            <!--<div class="detailBox mui-clearfix">-->
                <!--<div class="goods-img-box">-->
                    <!--<img src="../phoneImg/goods.jpg">-->
                <!--</div>-->
                <!--<div class="goods-product-box">-->
                    <!--<p class="goodsName">叮当网叮当网叮当网叮当网叮当网叮当网</p>-->
                    <!--<span class="price">￥6666<i>×6</i></span>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    </div>

    <div class="pay_way">
        <p class="payType">支付方式：</p>
        <p class="deliverType">配送方式：</p>
        <p class="code2">订单编号：564656891565652656<span>复制</span></p>
        <p class="createTime">下单时间：2017-11-09 10：09</p>
    </div>

    <div class="handle_box mui-clearfix">
        <!--<div class="blue_handle">去支付</div>-->
        <!--<div class="gray_handle">取消订单</div>-->
    </div>
</div>

<!--取消订单盒子-->
<div class="stage_float_box">
    <div class="stage_bottom_box">
        <div class="stage_box1">
            <div class="close_stage" id="close_stage"></div>
            <ul class="stage_title_box mui-clearfix">
                <!--<li class="stage_act"><span>大学生</span></li>-->
                <li style="width: 100%"><span>取消订单</span></li>
                <!--<li><span>花呗分期</span></li>-->
            </ul>
        </div>
        <ul class="stage_detail_box">
            <li class="mui-clearfix">
            <div class="state_detail_img"><img cancleValue="1" src="../phoneImg/goods_pigeon.jpg" alt=""></div>
            <div class="state_fr">
            <span>现在不想购买</span>
            </div>
            </li>

            <li class="mui-clearfix">
                <div class="state_detail_img"><img cancleValue="2" src="../phoneImg/no_pigeon.jpg" alt=""></div>
                <div class="state_fr">
                    <span>商品缺货</span>
                </div>
            </li>

            <li class="mui-clearfix">
                <div class="state_detail_img"><img cancleValue="3" src="../phoneImg/no_pigeon.jpg" alt=""></div>
                <div class="state_fr">
                    <span>添加或删除商品</span>
                </div>
            </li>

            <li class="mui-clearfix">
                <div class="state_detail_img"><img cancleValue="4" src="../phoneImg/no_pigeon.jpg" alt=""></div>
                <div class="state_fr">
                    <span>收获地址信息有误</span>
                </div>
            </li>

            <li class="mui-clearfix">
                <div class="state_detail_img"><img cancleValue="5" src="../phoneImg/no_pigeon.jpg" alt=""></div>
                <div class="state_fr">
                    <span>订单无法支付</span>
                </div>
            </li>

            <li class="mui-clearfix">
                <div class="state_detail_img"><img cancleValue="6" src="../phoneImg/no_pigeon.jpg" alt=""></div>
                <div class="state_fr">
                    <span>其他原因</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="stages_transaction" id="stages_transaction">提交</div>
</div>
    </div>
</div>

<script src="../js/mui.min.js"></script>
<script src="../js/jquery-1.10.1.min.js"></script>
<script>
    document.write("<s" + "cript type='text/javascript' src='../js/common.js?" + Math.random() + "'></scr" + "ipt>");
    document.write("<s" + "cript type='text/javascript' src='../phoneJs/orderDetail.js?" + Math.random() + "'></scr" + "ipt>");
</script>
</body>
</html>
